<style lang="less" scoped>
  .quest_content{
    width: 100%;
    height: 100%;
    padding-left:10px;
    padding-right:10px;
    background-color:#FFFFFF;
  }
  .qheader{
    font-size: 16px;
    height: 58px;
    font-weight:bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;
    border-bottom: 1px solid rgb(240,240,240);
  };
  .gcontent{
    font-size: 13px;
    padding:10px;
    margin-bottom: 10px;
  }
  .tale{
      word-wrap: break-word;
      word-break: break-all;
      border-collapse:collapse;
      border:1px solid #dcdee2;
      font-size:14px;
      height: 50px;
      width: 100%;
  }
  .tale_title{
      height: 40px;
      background-color: #F2F2F2;
      font-weight:bold;

  }
  .expand-row{
      margin-bottom: 16px;
      left:5%;
  }
</style>
<template>
  <div class="quest_content" style="overflow-y:auto;overflow-x: hidden;height:calc(100vh - 144px)">
    <div class="gcontent">
      <Form :label-width="120" label-position="left">
        <Row>
          <Col span="12" v-if="reqId != null && reqId != ''">
          <FormItem label="工单ID：">
            <Input v-model="reqId" :readonly="true" style="width:80%" />
          </FormItem>
          </Col>
          <Col span="12">
          <FormItem label="工单标题：" :required="true">
            <Input v-if="(processInfo===undefined)" v-model="content.reqSubject" style="width:80%" />
            <Input v-else v-model="processInfo.reqSubject" :readonly="true" style="width:80%" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="22">
          <FormItem label="申请描述：" :required="true">
            <Input v-if="(processInfo===undefined)" v-model="content.reqDes" type="textarea" maxlength="250"
              show-word-limit :rows="3" style="width:80%" />
            <Input v-else v-model="processInfo.reqDes" :readonly="true" type="textarea" :rows="3" />
          </FormItem>
          </Col>
        </Row>
        <Row>
          <Col>
          <FormItem :label="ifCancelAccount?'销户的账号：':'申请的账号：'" :required="true">
            <span></span>
          </FormItem>
          </Col>
        </Row>
      </Form>
      <Row>
        <Col>
        <component ref="sonAccount" :is="'sonAccount'" :myAccount="myAccount" :page="'accountSon'" :ifedit="ifedit"
          :serviceType="serviceType" :taskDefKey="taskDefKey" :ifCancelAccount="ifCancelAccount"></component>
        </Col>
      </Row>
      <!-- 附件 -->
      <template>
        <Divider orientation="left">附件</Divider>
        <component ref="file" :is="'file'" :ifedit="ifedit" :filesList="filesList" v-model="files"></component>
      </template>
    </div>
  </div>
</template>
<script>
  import ajax from "../../ajax_util"
  import Axios from 'axios'
  import sonAccount from './account/sonAccount.vue'
  import file from './settledin/file'

  export default {
    components: {
      sonAccount,
      file
    },
    data() {
      return {
        reqid: 0,
        files: [],
        sonRecord: {
          dacps: [],
          dbs: [],
          elseAuthes: [],
          files: [{
            fileName: "",
            fileUrl: ""
          }],
          hadoops: [],
          hftps: [],
          paas: [],
          reqId: 0,
          severs: []
        },
        content: {
          reqSubject: "",
          reqDes: ""
        },
        myAccount: {},
        // serviceType:"",
        taskDefKey: "",
        ifCancelAccount: false
      }
    },
    mounted: function() {
      console.log("======params=====", this.params, this.serviceType);
      if (this.params != null && this.params != undefined) {
        this.serviceType = this.params.serviceType;
        this.taskDefKey = this.params.taskDefKey;
      }

      this.tabs = this.$store.state.tabs;
      this.$nextTick(() => {
        if (this.reqId == null && this.draftsId == null) {
          this.getData();
        } else if (this.reqId != null) {
          //console.log("---apply-------");
          this.getApplyInfo(); //获取表单详情
        }
      })
    },
    methods: {
      exportAccountCancel(){
        this.$refs.sonAccount.exportAccountCancel()
      },
      ifshowmd(list, tabsPage) {
        var result = false
        for (let index = 0; index < list.length - 1; index++) {
          if (list.tabKey == tabsPage) {
            result = true
          }
        }
        return result
      },
      getData() {
        console.log("=========getData=======",this.params);
        if (this.serviceType === "sonAccountCancel") {
          this.ifCancelAccount = true;
          this.taskDefKey = this.params.taskDefKey;
        }
        this.myAccount = this.params.accountInfo;
      },
      getApplyInfo() {
        console.log("=========getApplyInfo=======", this.processInfo);
        if (this.serviceType === "sonAccountCancel") {
          this.ifCancelAccount = true;
          //this.myAccount
        }
        //console.log("---this.ifCancelAccount-----",this.serviceType,this.taskDefKey);
        this.myAccount = this.processInfo.content
        this.reqid = this.processInfo.content.reqId;
        this.files = this.processInfo.files;
      },
      validate() {
        var sonRecord = this.$refs.sonAccount.sonRecord;
        if (this.content.reqSubject === "") {
          this.$Message.error({
            content: '请填写工单标题!',
            duration: 3
          });
          return false;
        }else if (this.content.reqSubject.length > 50) {
          this.$Message.error({
            content: '工单标题最多填写50个字符',
            duration: 3
          });
          return false;
        }else if (this.content.reqDes === "") {
          this.$Message.error({
            content: '请填写申请描述!',
            duration: 3
          });
          return false;
        } else if (sonRecord.severs.length == 0 && sonRecord.dbs.length == 0 && sonRecord.hadoops.length == 0 &&
          sonRecord.hftps.length == 0 && sonRecord.paas.length == 0 && sonRecord.dacps.length == 0 && sonRecord.elseAuthes
          .length == 0) {
          this.$Message.error({
            content: '请至少选择一个账号!',
            duration: 3
          });
          return false;
        } else {
          return true
        }
      },
      getInfo() {
        this.object = this.$refs.sonAccount.sonRecord;
        this.object.reqId = this.reqid;
        this.object.files = this.files
        this.content.object = this.object;
        this.content.files = this.files;
        var publicInfo = this.utils.setPublicInfoInfo(this.content.reqSubject, 0, 0, this.content.reqDes)
        this.content.puslicInfo = publicInfo
        console.log("=====content=======", this.content);
        return this.content
      },
      // 获取处理时需要提交的参数
      getHandleParams(handleInfo){
        handleInfo.reqSubject = this.content.reqSubject
        handleInfo.startTime = 0
        handleInfo.hopeTime = 0
        handleInfo.reqDes = this.content.reqDes
        handleInfo.isEdit = this.isEdit;
        console.log("aaaa-------->",this.ifedit, this.isEdit == 1)
        handleInfo.isChangeContent = 0;
		if(!this.ifedit){
		  handleInfo.isChangeContent = 1;
		}
        if (this.isEdit == 1) {
          handleInfo.isChangeContent = 1;
          handleInfo.content = this.getInfo()
        }
      },
      //处理页面获取下一步处理人需要的参数
      getHandleUserParams(opOptions){
        var param = {}
        if(opOptions != ""){
          param.vari = opOptions
        }
        return param
      },
    },
    props: {
      isEdit:{},
      params: {},
      ifedit: {
        type: Boolean,
        default: false,
      },
      reqId: {
        default: null
      },
      draftsId: {
        default: null
      },
      filesList: {},
      processInfo: {},
      accountInfo: {},
      serviceType: {}
    }
  }
</script>
